<template>
  <div class="content" :class="{ 'content--children': !isParent }">
    <template v-if="data.type == 'markdown'">
      <app-markdown :content="data.content" :typing="{ setp: 200, interval: 1 }" />
    </template>
    <template v-else-if="data.type == 'topo'">
      <div class="topo">已成功生产拓扑图 <el-button type="primary">点击查看</el-button></div>
    </template>
    <template v-else-if="data.type == 'host'">
      <div class="host">
        <div class="value">主机：{{ data.data.host }}</div>
        <div class="value">IP：{{ data.data.host_ip }}</div>
        <div class="value">报警等级：{{ data.data.level }}</div>
      </div>
    </template>
    <template v-else>
      {{ data.content }}
    </template>
  </div>
</template>
<script setup>
const props = defineProps({
  data: { type: Object },
  isParent: { type: Boolean, default: false },
})
</script>
<style lang="scss" scoped>
.content--children {
  margin-top: 12px;
  // background-color: #f9fafb;
  background-color: #fcfcff;
  padding: 15px;
}

.host {
  padding: 6px 12px;
  display: flex;
  gap: 12px;
  background-color: #fcfbfe;
  border: 1px solid #f2f3f0;
}
</style>
